<template>
  <!-- 模型弹窗：根据editModel渲染，0 上传模型；1 编辑模型；2 更新模型版本；3 历史版本；4 组合模型 -->
    <!-- :edit-model="editModel === 3 ? 'V' : 'E'" -->
    <!-- :forms.sync="form" -->
  <dialog-form
    ref="dialogForm"
    :visible.sync="dialogVisible"
    :edit-model="'E'"
    :form="form"
    :forms.sync="form"
    :header-title="'添加方案'"
    :width="1000"
    :isEmit="false"
    :rules="rules"
    :form-list="formList"
    @confirm="submitForm"
    :destroy-on-close="true"
  >
    <template slot="footer">
      <a-button class="mr10p" :disabled="loading.subbtn" @click="dialogVisible=false"> 取消 </a-button>
      <a-button type="primary" :loading="loading.subbtn" @click="submitForm"> 确定 </a-button>
    </template>
  </dialog-form>
</template>

<script>
import Selector from '@/components/Select/Selector'
import DialogForm from '@/components/DialogForm' // 弹窗
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
import ASelectOrgPeople from '@/components/Select/ASelectOrgPeople'
import UploadList from '@/components/UploadList'
import { getZgData } from '@/api/technical/meeting'
import { listOption } from '@/api/technical/approvalPlan'
import { getList } from '@/api/technical/approval'

export default {
  name: 'DialogModel',
  components: {
    SelectSubCompany,
    SelectPersonByProject,
    ASelectOrgPeople,
    SelectProject,
    UploadList,
    DialogForm
  },
  data() {
    return {
      form: {},
      loading: {
        subbtn: false
      },
      downloading: false, // 下载loading
      rules: {
        branchComId: [{ required: true, message: '请选择所属分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择所属项目', trigger: 'change' }],
        programTypeId: [{ required: true, message: '请选择方案类别', trigger: 'change' }],
        programId: [{ required: true, message: '请选择方案名称', trigger: 'change' }],
        professional: [{ required: true, whitespace: true, message: '请输入专业类别', trigger: 'blur' }],
        mainPeopleId: [
          { required: true, message: '请选择主评专家', trigger: 'change' },
          {  type: 'array', min: 2, message: '至少选择2名专家', trigger: 'blur' }
        ],
        pictures: [{ required: true, type: 'array', message: '请上传方案电子版或扫描件', trigger: 'change' }],
        rectificationPicture: [{ required: true, type: 'array', message: '请上传评审汇报PPT', trigger: 'change' }],
        // otherPicture: [{ required: true, type: 'array', message: '请上传附件', trigger: 'change' }],
      },
      personList: []
    }
  },
  props: {
    editModel: {
      type: String,
      default: () => "add"
    },
    // 显隐控件
    visible: {
      type: Boolean,
      default: () => false
    },
    // 表单
    forms: {
      type: Object,
      default: () => null
    },
    // 刷新父组件列表
    refresh: Function
  },
  watch: {
    forms: {
      immediate: true,
      handler(val, oldVal){
        if (val) {
          this.form = val
        }
        // console.log(this.editModel)
      },
      deep:true //true 深度监听
    }
  },
  computed: {
    editable() {
      return this.editModel !== 'view'
    },
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    // 与父组件绑定forms
    // form: {
    //   get: function () {
    //     return this.forms
    //   },
    //   set: function (e) {
    //     this.$emit('update:forms', e)
    //   }
    // },
    ownOrgList() {
      let levels = [...this.$userInfo().employee.levels]
      let ownOrg = levels.filter((v) => {
        return v.code === 'CO' || v.code === 'BC'
      })
      ownOrg.forEach((v) => {
        if (v.code == 'CO') v.name = '总部机关'
      })
      return ownOrg
    },
    // 表单列表
    formList() {
      return [
        {
          type: SelectSubCompany,//'a-select',
          keyName: 'branchComId',
          label: '所属分公司',
          span: 12,
          // attrs: {
          //   isDefaultSelected: true
          // }
          selectChange: (e) => {
            this.form.branchComName = e?.orgName
          },
          disabled: (!this.editable || this.$currentPost().tagCode == 'BC'),
          // data: this.ownOrgList,
          // replaceFields: {
          //   label: 'name',
          //   value: 'id'
          // },
          // change: (e) => {
          //   let itme = this.ownOrgList.find(v => v.id == e)
          //   console.log(itme)
          //   this.form.branchComName = itme?.name
          //   this.form.branchComId = e
          // }
        },
        {
          type: SelectProject,
          keyName: 'projectId',
          viewName: 'projectName',
          label: '所属项目',
          span: 12,
          disabled: (!this.editable),
          attrs: {
            allowClear: true,
            autoSelected: this.editModel == 'add', //this.editable,
            isEdit: this.editModel !== 'add',
            isClear: true,
            keyValue: 'branchComId',
            form: this.form
          },
          change: (e) => {
            if (!e) {
              this.form.zgId = undefined
              this.form.zgName = undefined
            }
          },
          selectChange: (e) => {
            this.getZgData(e)
          }
        },
        {
          keyName: 'programTypeId',
          viewName: 'programTypeName',
          span: 12,
          type: Selector,
          label: '方案类别',
          attrs: {
            customApi: listOption,
            customQuery: { type: '5' }
          },
          'update:option': (e) => {
            if (e) {
              this.$set(this.form, 'programTypeId', e.id)
              this.$set(this.form, 'programTypeName', e.name)
              // this.form.submitDate = undefined
            }
          }
        },
        {
          keyName: 'programId',
          viewName: 'programName',
          span: 12,
          type: Selector,
          label: '方案名称',
          attrs: {
            customApi: getList,
            customQuery: {
              auditPast: true,
              branchCompany: this.form.branchComId,
              projectName: this.form.projectId,
              schemeCategory: this.form.programTypeId,
              pageNo: 1,
              pageSize: 5000,
            },
            customQueryType: { query: {type: this.form.branchComId + '_' + this.form.projectId + '_' + this.form.programTypeId} },
            isEmpty: true,
            labelName: 'schemeName'
          },
          // change: (e) => {
          //   if (!e) {
          //     this.form.submitDate = undefined
          //   }
          // },
          getOption: (e) => {
            if (e) {
              this.$set(this.form, 'submitDate', e.reportingTime)
              this.$set(this.form, 'programName', e.schemeName)
              this.$set(this.form, 'programId', e.id)
              this.form.submitDate = e.reportingTime
              this.form.programName = e.schemeName
              this.form.programId = e.id
            }
          },
        },
        {
          keyName: 'submitDate',
          type: 'a-date-picker',
          label: '编制时间',
          span: 12,
          disabled: true,
          attrs: {
            valueFormat: 'YYYY-MM-DD',
            // showTime: { format: "HH:mm:ss", valueFormat: "HH:mm:ss" },
            format: 'YYYY-MM-DD'
          }
        },
        {
          keyName: 'zgName',
          type: 'a-input',
          span: 12,
          disabled: true,
          label: '项目总工',
          change: (e) => {
            console.log(e)
          }
        },
        {
          keyName: 'professional',
          type: 'a-input',
          span: 12,
          disabled: (!this.editable),
          label: '专业类别',
        },
        {span: 12},
        {
          keyName: 'mainPeopleId',
          viewName: 'mainPeopleName',
          type: ASelectOrgPeople,
          span: 12,
          disabled: (!this.editable),
          label: '主评专家',
          attrs: {
            // keyValue: 'branchComId',
            // init: false,
            orgId: this.$currentPost().id,//this.$currentPost().tagCode == 'CO' ? this.form.branchComId : this.form.projectId,
          //   isOrg: true,
          //   isProject: false,
          //   showSearch: true,
            mode: 'multiple',
          },
          onSelectChange: (e) => {
            if (e.length) {
              let names = e.map(v => v.name)
              this.$set(this.form, 'mainPeopleName', names)
            }
          }
        },
        // {
        //   keyName: 'mainPeopleId',
        //   viewName: 'mainPeopleName',
        //   type: SelectPersonByProject,
        //   span: 12,
        //   disabled: (!this.editable),
        //   label: '主评专家',
        //   attrs: {
        //     orgId: this.$currentPost().id,//this.$currentPost().tagCode == 'CO' ? this.form.branchComId : this.form.projectId,
        //     isOrg: true,
        //     isProject: false,
        //     showSearch: true,
        //     mode: 'multiple',
        //   },
        //   personChanged: (e) => {
        //     if (e.length) {
        //       let names = e.map(v => v.employeeName)
        //       // let value = e.map(v => v.employeeId)
        //       // this.$set(this.form, 'mainPeopleId', value)
        //       this.$set(this.form, 'mainPeopleName', names)
        //     }
        //   }
        // },
        {span: 12},
        {
          keyName: 'pictures',
          type: UploadList,
          span: 24,
          disabled: (!this.editable),
          label: '方案电子版或扫描件',
          attrs: {
            businessCode: 'TM05',
            uploadArrys: this.form.pictures || []
          },
          fileArrysData: (e) => {
            this.fileArrysData('pictures', e)
          }
        },
        {
          keyName: 'rectificationPicture',
          type: UploadList,
          span: 24,
          disabled: (!this.editable),
          label: '评审汇报PPT',
          attrs: {
            businessCode: 'TM05',
            uploadArrys: this.form.rectificationPicture || []
          },
          fileArrysData: (e) => {
            this.fileArrysData('rectificationPicture', e)
          }
        },
        {
          keyName: 'otherPicture',
          type: UploadList,
          span: 24,
          disabled: (!this.editable),
          label: '其它',
          attrs: {
            businessCode: 'TM05',
            uploadArrys: this.form.otherPicture || []
          },
          fileArrysData: (e) => {
            this.fileArrysData('otherPicture', e)
          }
        },
      ]
    }
  },
  mounted() {
  },
  methods: {
    getZgData(e) {
      if (!e) return
      // this.$set(this.form, 'projectId', e.code)
      // this.$set(this.form, 'projectName', e.name)
      this.form.projectId = e.code
      this.form.projectName = e.name
      getZgData({id: e.code}).then((res) => {
        if (res.code == 200 || res.data.code == 200) {
          const data = res.data
          let zgId = data.map(v => v.id).join(',')
          let zgName = data.map(v => v.name).join(',')
          this.$nextTick(() => {
            this.$set(this.form, 'zgId', zgId)
            this.$set(this.form, 'zgName', zgName)
            this.form.zgId = zgId
            this.form.zgName = zgName
          })
        }
      })
    },
    fileArrysData(name, e) {
      this.$set(this.form, name, [...e])
      this.$refs.dialogForm.$refs.ruleForm.validateField(name)
    },
    submitForm(e) {
      console.log(e)
      console.log(this.form)
      this.$emit('confirm', this.form)
      this.dialogVisible = false
    },
  }
}
</script>